<template>
  <div>
    <PageHeader hidden-breadcrumb>
        <template #title><div class="demo-title">卡片列表</div></template>
        <template #content>
          <div class="demo-content">卡片类型的列表，配合栅格实现响应式布局。</div>
        </template>
    </PageHeader>
    
    <Row style="margin:20px;" :gutter="10">
        <i-col :lg="6" :xs="24" :sm="12" :md="12" v-for="item in data" :key="item.name" style="margin-bottom:20px;">
            <CardInfo :info="item"/>
        </i-col>
    </Row>
   

    
  </div>
</template>

<script>
import CardInfo from '@/components/list/components/CardInfo.vue'
export default {
    components:{
        CardInfo
    },
    data () {
        return {
            data: [
                {
                    desc:'对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。',
                    name: 'view plus',
                },
                {
                    desc:'对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面',
                    name: 'iview-pro',
                },
                {
                    desc:'对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。',
                    name: 'iview-admin-pro',
                },
                {
                    desc:'对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。',
                    name: 'iview-developer',
                },
                {
                    desc:'对比的基本思想是，要避免页面上的元素太过相似。如果元素（字体、颜色、大小、线宽、形状、空间等）不相同，那就干脆让它们截然不同。要让页面引人注意，对比通常是最重要的一个因素，正是它能使读者首先看这个页面。',
                    name: 'iview-run',
                }
            ]
        }
    },
    methods: {
        show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data[index].name}<br>Age：${this.data[index].age}<br>Address：${this.data[index].address}`
            })
        },
        remove (index) {
            this.data.splice(index, 1);
        }
}
}
</script>
<style scoped>
.card-list >>> .ivu-card-body {
    padding: 0px;
}
</style>
